<template>
    <div>
        <div class="row row--15">
            <div class="col-lg-12">
                <ul class="nav nav-pills rwt-portfolio-filter filter-button-default liststyle mb--20"
                    id="pills-tab"
                    role="tablist"
                    data-aos="fade-up">
                    <li class="nav-item list-item"
                        role="presentation"
                        v-for="(filter, index) in filters"
                        :key="`tab-button-${filter.id}`">
                        <button class="nav-link"
                                :class="{'active': index === 0}"
                                :id="`pills-${filter.text}-tab`"
                                data-bs-toggle="pill"
                                :data-bs-target="`#pills-${filter.text}`"
                                type="button"
                                role="tab"
                                :aria-controls="`pills-${filter.text}`"
                                :aria-selected="index === activeTab ? 'true' : 'false'"
                                @click="doFilter(index)">
                            {{ filter.type }}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade"
                 :class="{'show active': index === 0}"
                 :id="`pills-${filter.text}`"
                 role="tabpanel"
                 :aria-labelledby="`pills-${filter.text}-tab`"
                 v-for="(filter, index) in filters"
                 :key="`tab-pane-${filter.id}`">
                <div class="row row--15">
                    <template v-for="(portfolio, index) in currentData">
                        <div :class="`${column} portfolio`" data-aos="fade-up">
                            <div class="rwt-card">
                                <div class="inner">
                                    <div class="thumbnail">
                                        <figure class="card-image">
                                            <router-link :to="`/portfolio-details/${portfolio.id}`">
                                                <img class="img-fluid" :src="portfolio.result" alt="Portfolio-01" style="width: 100%"/>
                                            </router-link>
                                        </figure>
                                        <router-link :to="`/portfolio-details/${portfolio.id}`" class="rwt-overlay"></router-link>
                                    </div>
									<div class="content">
										<h5 class="title mb--10">
											<router-link :to="`/portfolio-details/${portfolio.id}`">
												{{ portfolio.typeZh}}
											</router-link>
										</h5>
									</div>
									<el-row>
										<el-col :span="22">
											<span class="subtitle b2 text-capitalize">{{ portfolio.time }}</span>
										</el-col>
										<el-col :span="2">
											<div @click="deleteImage(portfolio.id)" style="cursor: pointer">
												<Icon name="trash-2"/>
											</div>
										</el-col>
									</el-row>
                                </div>
                            </div>
                        </div>
                    </template>
<!--                    <template v-if="filter.text !== 'all'"-->
<!--                              v-for="(portfolio, index) in currentData">-->
<!--                        <div :class="`${column} portfolio`">-->
<!--                            <div class="rwt-card">-->
<!--                                <div class="inner">-->
<!--                                    <div class="thumbnail">-->
<!--                                        <figure class="card-image">-->
<!--                                            <router-link :to="`/portfolio-details/${portfolio.id}`">-->
<!--                                                <img  class="img-fluid" :src="portfolio.result" alt="Portfolio-01"/>-->
<!--                                            </router-link>-->
<!--                                        </figure>-->
<!--                                        <router-link :to="`/portfolio-details/${portfolio.id}`" class="rwt-overlay"></router-link>-->
<!--                                    </div>-->
<!--									<div class="content">-->
<!--										<h5 class="title mb&#45;&#45;10">-->
<!--											<router-link :to="`/portfolio-details/${portfolio.id}`">-->
<!--												{{ portfolio.typeZh}}-->
<!--											</router-link>-->
<!--										</h5>-->
<!--									</div>-->

<!--                                    <el-row>-->
<!--                                    	<el-col :span="22">-->
<!--                                    		<span class="subtitle b2 text-capitalize">{{ portfolio.time }}</span>-->
<!--                                    	</el-col>-->
<!--                                    	<el-col :span="2">-->
<!--                                    		<div @click="deleteImage(portfolio.id)">-->
<!--                                    			<Icon name="trash-2"/>-->
<!--                                    		</div>-->
<!--                                    	</el-col>-->
<!--                                    </el-row>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </template>-->
                </div>
                <div class="pager-box">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="filterData.length"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-size=12
                    />
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import Icon from '../../icon/Icon'

    export default {
        name: 'Portfolio',
        components: {Icon},
        // mixins: [PortfolioItemMixin],
        props: {
            buttonClass: {
                type: String,
                default: 'btn btn-default btn-large btn-icon'
            },
            column: {
                type: String,
                default: 'col-lg-6 col-md-6 col-sm-12 col-12 mt--30'
            }
        },
        data() {
            return {
                portfolioData: [],
                filterData:[],
                currentData:[],
                currentPage:1,
                filters: [
                    {
                        id: 1,
                        text: 'all',
						type: '全部图片',
                    },
                    {
                        id: 2,
                        text: 'objectExtraction',
						type: '目标提取',
                    },
                    {
                        id: 3,
                        text: 'changeDetection',
						type: '变化检测',
                    },
                    {
                        id: 4,
                        text: 'objectDetection',
						type: '目标检测',
                    },
					{
					    id: 5,
					    text: 'terrainClassification',
						type: '地物分类',
					}
                ],
                activeFilter: '',
                activeTab: 0
            }
        },
        mounted() {
            this.getAllImage()
        },
        methods:{
            getAllImage(){
                var that = this;
                that.$axios.get(this.$global.apiUrl+'record/getAll?userId='+this.$ls.get('userInfo').id)
                    .then(res=>{
                        var imageData = res.data.data;
                        // console.log(imageData);
                        that.portfolioData = imageData.reverse()
                        that.portfolioData.forEach(item=>{
                            switch (item.type) {
                                case 'objectExtraction':
                                    item.typeZh='目标提取 '+item.type
                                    break
                                case 'changeDetection':
                                    item.typeZh='变化检测 '+item.type
                                    break
                                case 'objectDetection':
                                    item.typeZh='目标检测 '+item.type
                                    break
                                case 'terrainClassification':
                                    item.typeZh='地物分类 '+item.type
                                    break
                                default:break
                            }
                            item.time = item.time.replace('T',' ')
                        })
                        that.filterData = that.portfolioData
                        that.currentData=that.portfolioData.slice(0,12)
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },
            doFilter(index){
                // console.log('在筛选')
                this.activeTab=index
                this.filterData=[]
                var tab = this.filters[index].text
                // console.log(tab)
                if(tab==='all'){
                    this.filterData = this.portfolioData
                }else{
                    this.portfolioData.forEach(item=>{
                        if(item.type===tab){
                            this.filterData.push(item)
                        }
                    })
                }
                this.currentPage=1
                this.currentData=this.filterData.slice(0,12)
            },
            handleCurrentChange(val){
                this.currentPage=val
                this.currentData=this.filterData.slice((val-1)*12,(val-1)*12+12)
            },
			deleteImage(id){
				var that = this;
				that.$axios.post(this.$global.apiUrl+'record/removeOne?id='+id)
				.then(res=>{
					that.$message.success("删除成功！")
                    that.portfolioData.forEach(item=>{
                        if(item.id===id){
                            that.portfolioData.splice(that.portfolioData.indexOf(item),1)
                            that.filterData.splice(that.filterData.indexOf(item),1)
                            that.currentData = that.filterData.slice((this.currentPage-1)*12,(this.currentPage-1)*12+12)
                        }
                    })
				})
				.catch(function(error) {
					console.log(error);
				});
			}
		}
    }
</script>

<style scoped>
    .pager-box{
        width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 30px;
    }
    .pager-box>>>button,
    .pager-box>>>.el-pager li {
        background-color: transparent !important;
        color: #acacac !important;
        border: 1px solid #acacac;
    }

    .pager-box>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color:  #FB5343 !important;
        color: white!important;
    }
</style>